<template>
  <div class="balance-container">
    <tab :line-width=2 style="font-size: 2.5rem" active-color="#FFA500" bar-active-color="bar-active-color" animate>
      <tab-item selected @click="clickSwitchItem(0)">普通充值</tab-item>
      <tab-item @click="clickSwitchItem(1)">充值卡充值</tab-item>
    </tab>
    <div v-show="state == 0" class="balance-content">
      <div class="balance-item">
        <p>账户余额:</p>
        <p class="money">{{money | currency ' '}}</p>
      </div>
      <div class="line"></div>
      <div class="balance-item">
        <p>充值金额:</p>
        <input v-model="wxMoney" placeholder="请输入充值金额" type="text">
      </div>
      <div class="line"></div>
    </div>
    <div v-show="state == 1" class="balance-content">
      <div class="balance-item">
        <p>卡号:</p>
        <input v-model="cardNO" placeholder="请输入16位卡号" type="text">
      </div>
      <div class="line"></div>
      <div class="balance-item">
        <p>密码:</p>
        <input v-model="cardPw" placeholder="请输入6位数字密码" type="text">
      </div>
      <div class="line"></div>
    </div>
    <div class="btn-box">
      <div @click="recharge" class="balance-btn">立即充值</div>
    </div>
  </div>
</template>
<script>
  import Tab from './../../components/tab/tab.vue'
  import TabItem from './../../components/tab/tab-item.vue'
  var Global = require('./../../commons/js/Global');
  var LocalUtils = require('./../../commons/js/LocalStorageUtil');
  var MyRequire = require('./../../commons/js/MyRequest')
  export default{
      data(){
          return {
            state:0,
            money:100,
            wxMoney:"",
            cardNO:"",
            cardPw:"",
            weiPay:""
          }
      },
    components:{
      Tab,
      TabItem,
    },
      ready:function () {
        Global.closeLoading();
        var user = LocalUtils.getItem("User");
        console.log(user);
        this.money = user.money;
        this.user= user;
        console.log(this.money)
      },
    methods:{
      clickSwitchItem(state){
          if (this.state != state){
              this.state = state;
          }
      },
      recharge(){
          if (this.state == 0){
              //微信充值
            this.getInfo();
          }else if (this.state == 1){
              //充值卡充值
            var data = {
              action: "prepaid",
              card: this.cardNO,
              password: this.cardPw,
              accountId: this.user.id
            }
            MyRequire.MyPostWithToast("CardBalance",this,function (result,that) {
              console.log("充值卡充值");
              console.log(result)
              if (result.success){
                that.$router.go(-1);
              }else{
                Global.showToast(result.msg,that);
              }
            },data);
          }
      },
      getInfo(){
        var city = LocalUtils.getItem("city");
        var openid = LocalUtils.getItem("openid");
        console.log("openid:"+openid);
        var data =
          {
            orderType: 0,
            userId: this.user.id,
            money: this.wxMoney,
            cityId: city.id,
            platform: "TOUCH",
            version: Global.getVersion(),
            wechatOpenid: openid,
          };
        MyRequire.MyGetWithToast("PayBean",this,function (result,that) {
          if (result.success){
            that.weiPay = result.data.weiPay;
            that.isWeixinJSBridge();
          }else {
              Global.showToast(result.msg,that);
          }
        },data);
      },
      isWeixinJSBridge(){
        if (typeof WeixinJSBridge == "undefined") {
          console.log("isWeixinJSBridge is undefined");
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
          }
        } else {
          console.log("isWeixinJSBridge not undefined");
          this.onBridgeReady();
        }
      },
      onBridgeReady(){
        var that = this;
        WeixinJSBridge.invoke("getBrandWCPayRequest", {
            "appId": that.weiPay.appId,     //公众号名称，由商户传入
            "timeStamp": that.weiPay.timeStamp,         //时间戳，自1970年以来的秒数
            "nonceStr": that.weiPay.nonceStr, //随机串
            "package": "prepay_id=" + that.weiPay.prepayId,
            "signType": "MD5",         //微信签名方式：
            "paySign": that.weiPay.paySign //微信签名
          }
          , function (res) {
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              window.history.go(-1);
            }
          });
      }
    }
  }
</script>
<style lang="less">
  @import './balance.less';
</style>
